<script setup lang="ts">
import VueDraggable from 'vuedraggable'

const list = ref([
  { id: 1, name: 'Dear John' },
  { id: 2, name: 'Dear Jane' },
  { id: 3, name: 'Dear Mary' },
  { id: 4, name: 'Dear Peter' },
  { id: 5, name: 'Dear Paul' },
  { id: 6, name: 'Dear Sarah' },
])
</script>

<template>
  <VueDraggable
    :list="list" item-key="id"
    ghost-class="ghost"
    chosen-class="chosenClass"
  >
    <template #item="{ element }">
      <div class="item move p-3">
        {{ element.name }}
      </div>
    </template>
  </VueDraggable>
</template>

<style scopeds>
.ghost {
  border: solid 1px rgb(19, 41, 239);
}
.chosenClass {
  background-color: #0b039e;
}
</style>
